import React from "react"
import {
  Header,
  Footer,
  SideMenu,
  Carousel,
  ProductCollection,
  BusinessPartners,
} from "../../components"
import { Row, Col, Typography, Spin } from "antd"
import sideImage from "../../assets/images/sider_2019_12-09.png"
import sideImage2 from "../../assets/images/sider_2019_02-04.png"
import sideImage3 from "../../assets/images/sider_2019_02-04-2.png"
import styles from "./home-page.module.css"
import { withTranslation, WithTranslation } from "react-i18next"
import { connect } from "react-redux"
import { RootState } from "../../redux/store"
import { giveMeDataActionCreator } from "../../redux/recommend-products/recommend-products-actions"
import { MainLayout } from "../../layout/main-layout"

// 定义数据类型
interface State {
  loading: boolean
  error: string | null
  productList: {
    productList1: any[]
    productList2: any[]
    productList3: any[]
  }
}

const mapStateToProps = (state: RootState) => {
  return {
    loading: state.recommendProducts.loading,
    error: state.recommendProducts.error,
    productList: state.recommendProducts.productList,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    giveMeData: () => {
      dispatch(giveMeDataActionCreator())
    },
  }
}
type PropsType = WithTranslation &
  ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>

class HomePageComponent extends React.Component<PropsType, State> {
  componentDidMount() {
    this.props.giveMeData()
  }
  render() {
    const { t, productList, loading, error } = this.props
    if (loading) {
      return (
        <Spin
          size="large"
          style={{
            marginTop: 200,
            marginBottom: 200,
            marginLeft: "auto",
            marginRight: "auto",
            width: "100%",
          }}
        />
      )
    }
    if (error) {
      return <div>网站出错：{error}</div>
    }
    return (
      <MainLayout>
        {/* content */}
        <Row>
          <Col span={6}>
            <SideMenu />
          </Col>
          <Col span={18}>
            <Carousel />
          </Col>
        </Row>
        <ProductCollection
          title={
            <Typography.Title level={3} type="warning">
              {t("home_page.hot_recommended")}
            </Typography.Title>
          }
          sideImage={sideImage}
          products={productList.productList1}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="danger">
              {t("home_page.new_arrival")}
            </Typography.Title>
          }
          sideImage={sideImage2}
          products={productList.productList2}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="success">
              {t("home_page.domestic_travel")}
            </Typography.Title>
          }
          sideImage={sideImage3}
          products={productList.productList3}
        />
        <BusinessPartners />
      </MainLayout>
    )
  }
}

export const HomePage = connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(HomePageComponent))
